<!--
 * @Author: 孙文豪
 * @Description: 个人信息弹窗组件
 * @Date: 2024-03-06 14:56:43
 * @LastEditTime: 2024-03-06 15:48:26
 * @LastEditors: 孙文豪
-->
<template>
  <swh-drag-box
    :title="'修改密码'"
    :zIndex="99"
    :top="'200px'"
    :isMask="true"
    :isPadding="false"
    @closePortability="close"
    @confirmDarg="confirm"
  >
    <div class="personal-info">
      <div class="input-box">
        <span class="text">原始密码：</span>
        <input
          class="pass-input"
          type="password"
          placeholder="请输入原始密码"
          v-model="originalPass"
        />
      </div>
      <div class="input-box">
        <span class="text">新密码：</span>
        <input
          class="pass-input"
          type="password"
          placeholder="请输入新密码"
          v-model="newPass"
        />
      </div>
      <div class="input-box">
        <span class="text">确认密码：</span>
        <input
          class="pass-input"
          type="password"
          placeholder="请再次确认密码"
          v-model="confirmPass"
        />
      </div>
    </div>
  </swh-drag-box>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
export default {
  name: '',
  setup(props, ctx) {
    const data = reactive({
      originalPass: '',
      newPass: '',
      confirmPass: ''
    });
    onBeforeMount(() => {});
    onMounted(() => {});
    const close = () => {
      ctx.emit('close');
    };
    // 点击确认事件
    const confirm = () => {
      if (!data.originalPass) {
        Message({
          type: 'warning',
          content: '请输入原始密码'
        });
        return;
      }
      if (!data.newPass) {
        Message({
          type: 'warning',
          content: '请输入新密码'
        });
        return;
      }
      if (data.newPass !== data.confirmPass) {
        Message({
          type: 'warning',
          content: '新密码不一致！'
        });
      } else if (data.originalPass === data.confirmPass) {
        Message({
          type: 'warning',
          content: '新密码不能和原始密码一样！'
        });
      } else {
        // 这里需要判断原始密码是否正确
        Message({
          type: 'success',
          content: '修改成功'
        });
      }
    };
    return {
      confirm,
      close,
      ...toRefs(data)
    };
  }
};
</script>
<style scoped lang="less">
.personal-info {
  width: 480px;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
  background: #fff;
  .input-box {
    overflow: hidden;
    margin-bottom: 20px;
    .text {
      float: left;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: @HSB;
      width: 80px;
      margin-left: 50px;
    }
    .pass-input {
      float: left;
      width: 240px;
      height: 32px;
      padding: 0 10px;
      border-radius: 4px;
      box-sizing: border-box;
      background: #fff;
      line-height: 32px;
      outline: none;
      border: 1px solid @HSD;

      &:focus {
        border: 1px solid @TSA;
      }
      &::-webkit-input-placeholder {
        color: @HSD;
      }
    }
  }
}
</style>
